<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .uls {
            width: 200px;
            height: 30px;
        }

        li {
            float: left;
            list-style: none;
            display: inline;
            width: 25%;
            text-align: center;
            background-color: whitesmoke;
        }

        .boss {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

        .box {
            display: none;
            width: 200px;
            height: 100px;
            background-color: pink;
        }

        .bos2 {
            width: 200px;
            height: 100px;
        }

        .xi {
            display: block;
            width: 200px;
            height: 100px;
            background-color: pink;
        }

        .add {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="boss">
        <ul class="uls">
            <li class="add" data-id="0">000</li>
            <li data-id="1">111</li>
            <li data-id="2">222</li>
            <li data-id="3">333</li>
        </ul>
        <div class="bos2">
            <div class="box xi">000</div>
            <div class="box">111</div>
            <div class="box">222</div>
            <div class="box">333</div>
        </div>

    </div>

    <script>
        const boss = document.querySelector('.boss');
        const uli = document.querySelector('ul');
        const box = document.querySelectorAll('.box');
        console.log(box);
        const bos2 = document.querySelector('.bos2');

        //console.log(uli.children[0]);

        // console.log(boss);
        uli.addEventListener('click', function (e) {
            if (e.target.tagName === 'LI') {
                document.querySelector('.uls .add').classList.remove('add');
                e.target.classList.add('add');
                // 利用自定义属性data- 创建索引
                console.log(e.target.dataset.id);
                let num = Number(e.target.dataset.id);
                document.querySelector('.bos2 .xi').classList.remove('xi');
                document.querySelector(`.bos2 .box:nth-child(${num + 1})`).classList.add('xi');
            }

        })
    </script>
</body>

</html>